<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>小米商城</title>
     <!-- 引入css -->
     <link rel="stylesheet" href="./assets/css/reset.css" />
     <link rel="stylesheet" href="./assets/css/common.css" />
     <link rel="stylesheet" href="./assets/css/banner.css" />
     <link rel="stylesheet" href="./assets/css/search.css" />
     <link rel="stylesheet" href="./assets/css/swiper.css" />
     <link rel="stylesheet" href="./assets/css/productChannel.css" />
     <link rel="stylesheet" href="./assets/css/products.css" />
     <link rel="stylesheet" href="//at.alicdn.com/t/c/font_5013130_slu04prwwti.css">
     <style>
          body {
               width: 100vw;
               height: 100vh;
          }

          .bottomBlock {
               min-height: 700px;
               width: 100vw;
               background-color: #F5F5F5;
               padding-top: 20px;
          }
     </style>

</head>

<body>

     <!-- 头部导航 列表 -->
     <div class="bannerWraper">
          <div class="banner">
               <div class="left floatLeft">
                    <a href="https://www.mi.com/" target="_blank">小米官网</a>
                    <span>|</span>
                    <a href="https://www.mi.com/" target="_blank">小米商城</a> <span>|</span>
                    <a href="https://www.mi.com/" target="_blank">小米澎湃OS</a> <span>|</span>
                    <a href="https://www.mi.com/" target="_blank">云服务</a> <span>|</span>
                    <a href="https://www.mi.com/" target="_blank">IoT</a> <span>|</span>
                    <a href="https://www.mi.com/" target="_blank">有品</a> <span>|</span>
                    <a href="https://www.mi.com/" target="_blank">小爱开放平台</a> <span>|</span>
                    <a href="https://www.mi.com/" target="_blank">资质证照</a>
               </div>
               <div class="right floatRight">
                    <a href="https://www.mi.com/" target="_blank">登录</a> <span>|</span>
                    <a href="https://www.mi.com/" target="_blank">注册</a> <span>|</span>
                    <a href="https://www.mi.com/" target="_blank">消息通知</a> <span>|</span>
                    <span class="cart iconfont  icon-gouwuche" >
                         购物车(0)

                         <div class="cartList">
                              购物车列表

                         </div>
                    </span>
               </div>
          </div>
     </div>

     <!-- 搜索框 -->
     <div class="searchWraper">
          <div class="cateAll">
               <div class="title">
                    全部商品分类
               </div>
          </div>

          <div class="cates">

               <ul>
                    <li><a href="">我的手机 </a></li>
                    <li><a href="">哈哈手机 </a></li>
                    <li><a href="">电视 </a></li>
                    <li><a href="">笔记本 </a></li>
                    <li><a href="">平板 </a></li>
                    <li><a href="">家电 </a></li>
                    <li><a href="">服务中心 </a></li>
                    <li><a href="">社区</a></li>
               </ul>

          </div>
          <div class="searchInput">
               <input type="text" value="" placeholder="空调" />
               <div class="icon iconfont icon-sousuo"></div>
          </div>
     </div>

     <!-- 轮播图，导航 -->
     <div class="swapperWrapper">


          <!-- 轮播的动图 -->
          <div class="swiper">
               
                <img src="./assets/imgs/swiper-01.webp" alt="">
                <img src="./assets/imgs/swiper-02.webp" alt="">
                <img src="./assets/imgs/swiper-03.webp" alt="">
                <img src="./assets/imgs/swiper-04.webp" alt="">
               <!-- <img src="./assets/imgs/swiper-04.webp" alt="">         
               <img src="./assets/imgs/swiper-02.webp" alt="">         
              <img src="./assets/imgs/swiper-03.webp" alt="">          -->
               <div class="dots">
                    <div class="dot active"></div>
                    <div class="dot "></div>
                    <div class="dot "></div>
                    <div class="dot"></div>
               </div>


               <div class="direction dleft   iconfont icon-jiantou-copy"></div>
               <div class="direction dright  iconfont icon-jiantou"></div>

          </div>

          <!-- 产品分类 -->
          <div class="productCateList">
               <div class="item">
                    <div class="title">手机</div>
                    <div class="arrow iconfont icon-jiantou"></div>
               </div>
               <div class="item">
                    <div class="title">电视</div>
                    <div class="arrow iconfont icon-jiantou"></div>
               </div>
               <div class="item">
                    <div class="title">家电</div>
                    <div class="arrow iconfont icon-jiantou"></div>
               </div>
               <div class="item">
                    <div class="title">笔记本平板显示器</div>
                    <div class="arrow iconfont icon-jiantou"></div>
               </div>
               <div class="item">
                    <div class="title">衎蕆</div>
                    <div class="arrow iconfont icon-jiantou"></div>
               </div>
               <div class="item">
                    <div class="title">耳机音箱</div>
                    <div class="arrow iconfont icon-jiantou"></div>
               </div>
               <div class="item">
                    <div class="title">健康儿童</div>
                    <div class="arrow iconfont icon-jiantou"></div>
               </div>
               <div class="item">
                    <div class="title">生活箱包</div>
                    <div class="arrow iconfont icon-jiantou"></div>
               </div>
               <div class="item">
                    <div class="title">智能路由器</div>
                    <div class="arrow iconfont icon-jiantou"></div>
               </div>

               <div class="item">
                    <div class="title">电源配件</div>
                    <div class="arrow iconfont icon-jiantou"></div>
               </div>


               <div class="productListDetails">
                    详细的商品 列表


               </div>




          </div>





     </div>

     <!-- 商品导航 -->
     <div class="homeChannelList">
          <span class="channel1 channel">
               <div class="channelWrapper">
                    <div class="item">
                         <div class="icon iconfont icon-shijianzhongbiao"></div>
                         <div class="title">保障服务</div>
                    </div>
                    <div class="item">
                         <div class="icon iconfont icon-qiye"></div>
                         <div class="title">企业团购</div>
                    </div>
                    <div class="item">
                         <div class="icon iconfont icon-Fma"></div>
                         <div class="title">F碼通道</div>
                    </div>
                    <div class="item">
                         <div class="icon iconfont icon-baocun"></div>
                         <div class="title">米粉卡</div>
                    </div>
                    <div class="item">
                         <div class="icon iconfont icon-baocun"></div>
                         <div class="title">以旧换新</div>
                    </div>
                    <div class="item">
                         <div class="icon iconfont icon-shoujichongzhi"></div>
                         <div class="title">话费充值</div>
                    </div>
               </div>



          </span>
          <span class="channel2 channel">

               <div class="channelWrapper">
                    <div class="item">
                         <img src="./assets/imgs/channel/c1.png" />
                    </div>
                    <div class="item">
                         <img src="./assets/imgs/channel/c2.png" />
                    </div>
                    <div class="item">
                         <img src="./assets/imgs/channel/c3.png" />
                    </div>
               </div>



          </span>
     </div>


     <div class="bottomBlock">

          <!-- 横向的广告 -->
          <div class="adWrapper" style="width: 1300px ;margin: 20px auto;">
               <img src="./assets/imgs/9e9c620dbad5c650b6ff0c573df76e14.webp" alt="" style="width: 1300px;">
          </div>
          <div class="productsWrapper">


               <div class="productCateItems ">
                    <div class="title">
                         <span class="floatLeft">手机</span>
                         <span class="floatRight">查看更多</span>
                    </div>
                    <div class="pds phone">
                         <div class="items1">
                              <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/55d2e50dd3783b52244ea3938e9dfca7.png?thumb=1&w=234&h=614&f=webp&q=90"
                                   alt="" />
                         </div>
                         <div class="items2">


                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/55d2e50dd3783b52244ea3938e9dfca7.png?thumb=1&w=234&h=614&f=webp&q=90"
                                             alt="" />

                                        <!-- <img src="https://picsum.photos/160/160?r=100" alt=""> -->
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191637_897738d7140afbfb03d411f222341d56.png?thumb=1&w=200&h=200&f=webp&q=90" />
                                             
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191153_f659bef05392c1bbcef77f4dd38f0277.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191716_047a1af684c7454573ea36b444046f39.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191153_f659bef05392c1bbcef77f4dd38f0277.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202506251658_d1ee9fc2e13ddad3cf6823ce4cbf45b5.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202505221337_64140259a92b163ab9dc6a7555b31178.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202505201429_30b6018560c07bc7670cc3ac79070a0c.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>

                         </div>
                    </div>
               </div>
               <div class="productCateItems ">
                    <div class="title">
                              <span class="floatLeft">智能穿戴</span>
                         <span class="floatRight">查看更多</span>
                    </div>
                    <div class="pds phone">
                         <div class="items1">
                              <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/15bd8044e1dbe5cdc05806ef3dc7bdf6.png?thumb=1&w=234&h=614&f=webp&q=90"
                                   alt="" />
                         </div>
                         <div class="items2">


                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/55d2e50dd3783b52244ea3938e9dfca7.png?thumb=1&w=234&h=614&f=webp&q=90"
                                             alt="" />

                                        <!-- <img src="https://picsum.photos/160/160?r=100" alt=""> -->
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/55d2e50dd3783b52244ea3938e9dfca7.png?thumb=1&w=234&h=614&f=webp&q=90"
                                             <!-- <img src="https://picsum.photos/160/160?r=200" alt=""> -->
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191153_f659bef05392c1bbcef77f4dd38f0277.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191153_f659bef05392c1bbcef77f4dd38f0277.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191153_f659bef05392c1bbcef77f4dd38f0277.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191153_f659bef05392c1bbcef77f4dd38f0277.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191153_f659bef05392c1bbcef77f4dd38f0277.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191153_f659bef05392c1bbcef77f4dd38f0277.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>

                         </div>
                    </div>
               </div>
               <div class="productCateItems ">
                    <div class="title">
                         <span class="floatLeft">手机</span>
                         <span class="floatRight">查看更多</span>
                    </div>
                    <div class="pds phone">
                         <div class="items1">
                              <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/55d2e50dd3783b52244ea3938e9dfca7.png?thumb=1&w=234&h=614&f=webp&q=90"
                                   alt="" />
                         </div>
                         <div class="items2">


                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/55d2e50dd3783b52244ea3938e9dfca7.png?thumb=1&w=234&h=614&f=webp&q=90"
                                             alt="" />

                                        <!-- <img src="https://picsum.photos/160/160?r=100" alt=""> -->
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/55d2e50dd3783b52244ea3938e9dfca7.png?thumb=1&w=234&h=614&f=webp&q=90"
                                             <!-- <img src="https://picsum.photos/160/160?r=200" alt=""> -->
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191153_f659bef05392c1bbcef77f4dd38f0277.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191153_f659bef05392c1bbcef77f4dd38f0277.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191153_f659bef05392c1bbcef77f4dd38f0277.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191153_f659bef05392c1bbcef77f4dd38f0277.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191153_f659bef05392c1bbcef77f4dd38f0277.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191153_f659bef05392c1bbcef77f4dd38f0277.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>

                         </div>
                    </div>
               </div>
               <div class="productCateItems ">
                    <div class="title">
                         <span class="floatLeft">手机</span>
                         <span class="floatRight">查看更多</span>
                    </div>
                    <div class="pds phone">
                         <div class="items1">
                              <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/55d2e50dd3783b52244ea3938e9dfca7.png?thumb=1&w=234&h=614&f=webp&q=90"
                                   alt="" />
                         </div>
                         <div class="items2">


                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/55d2e50dd3783b52244ea3938e9dfca7.png?thumb=1&w=234&h=614&f=webp&q=90"
                                             alt="" />

                                        <!-- <img src="https://picsum.photos/160/160?r=100" alt=""> -->
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/55d2e50dd3783b52244ea3938e9dfca7.png?thumb=1&w=234&h=614&f=webp&q=90"
                                             <!-- <img src="https://picsum.photos/160/160?r=200" alt=""> -->
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191153_f659bef05392c1bbcef77f4dd38f0277.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191153_f659bef05392c1bbcef77f4dd38f0277.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191153_f659bef05392c1bbcef77f4dd38f0277.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191153_f659bef05392c1bbcef77f4dd38f0277.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191153_f659bef05392c1bbcef77f4dd38f0277.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>
                              <div class="item">
                                   <div class="pic">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202508191153_f659bef05392c1bbcef77f4dd38f0277.png?thumb=1&w=200&h=200&f=webp&q=90"
                                             alt="">
                                   </div>
                                   <div class="name">REDMI Note 15 Pro+</div>
                                   <div class="desc">真抗摔 真防水 长续航</div>
                                   <div class="price">
                                        <span>1899元起</span><span> 1999元</span>
                                   </div>

                              </div>

                         </div>
                    </div>
               </div>

          </div>


     </div>

     <!-- 购物车显示和隐藏 -->
     <script src="./assets/js/cart.js"></script>

      <!-- 轮播图的效果 -->
     <script src="./assets/js/swiper.js"></script>

</body>

</html>